@import '@/styles/variable.scss';
@import '@/styles/mixin.scss';
$bottomInputH: .5rem;

.playlist-comment-page {
  .playlist-info {
    padding-top: $navHeight;
    padding-bottom: .07rem;
    background-color: $homeBgc;
    .box {
      height: .94rem;
      background-color: #fff;
      padding: .12rem .15rem;
      @include df();
      &:active {
        background-color: $activeBgc;
      }
      &>img {
        width: .7rem;
        aspect-ratio: 1;
        border-radius: .04rem;
        margin-right: .12rem;
      }
      .des-info {
        flex: 1;
        @include df(column);
        justify-content: center;
        font-size: .14rem;
        padding-right: .1rem;
        line-height: 1.5;
        .name {
          letter-spacing: .01rem;
        }
        .author {
          margin-top: .05rem;
          font-size: .12rem;
          color: #525252;
          span {
            color: #4775a9;
          }
        }
      }
      .right {
        @include df();
        align-items: center;
        color: rgb(185, 185, 185);
      }
    }
  }

  .comment-title {
    background-color: #fff;
    @include df();
    align-items: flex-end;
    padding: .13rem .16rem;
    span {
      color: #a9a9a9;
      font-size: .14rem;
      &.active {
        color: #363636;
        font-weight: bold;
      }
      &:nth-child(1) {
        flex: 1;
      }
      &:nth-child(n+2) {
        font-size: .12rem;
        margin-left: .12rem;
      }
    }
  }

  .comments-box {
    padding-bottom: calc($bottomInputH + .1rem);
    .comment-item {
    }
  }

  .bottom {
    text-align: center;
    color: #666;
    font-size: .14rem;
    padding: .25rem 0;
  }

  .bottom-input {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: hsla(0, 0%, 100%, .96);
    height: $bottomInputH;
    @include df();
    justify-content: space-between;
    align-items: center;
    padding: 0 .15rem;
    border-top: 1px solid #f7f7f7;
    @include placeholderColor($color: #b4b4b4, $fontsize: .14rem, $caretc: #c5c5c5);
    input {
      background-color: transparent;
      font-size: .13rem;
      flex: 1;
      border: none;
      color: $black;
    }
    p {
      font-size: .15rem;
      color: #9e9e9e;
    }
  }

  .no-comments {
    @include df();
    justify-content: center;
    padding-top: .5rem;
    color: grey;
    font-size: .14rem;
  }
}